<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<!--    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1">-->
</head>
<style>
    *{
        padding:0;
        margin:0;
    }

    /*步骤条*/
    .top{
        display: flex;
        font-size: 30px;
        justify-content: center;
        padding-top: 30px;
        background: #f2f2f2;
        padding-bottom: 40px

    }
    .top_li{
        text-align: center;
        position: relative;
        width:60px
    }
    .red{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ccc;
        margin:0 auto;
        margin-top: 55px;
    }
    .name{
        position: absolute;
        width: 150px;
        left: -44px;
        top: 0;
        color:#666;
    }
    .xian{
        width: 320px;
        height: 2px;
        background:#ccc;
        margin-top: 59px;
    }
    .name.active{
        color:#3683D3;
    }
    .red.active{
        background: #3683D3
    }
    .xian.active{
        background: #3683D3
    }
    page{
        background: #fff
    }
    .cont{
        /*	padding:30px;
            box-sizing: border-box;*/

    }
    .cont .tip{
        font-size: 35px;
        padding: 40px;
    }
    .duanxin{
        display: flex;
        align-items: center;
        background: #f2f2f2;
        padding: 0 30px;
        justify-content: space-between;
    }
    .duanxin .dx_tit{
        font-size: 30px;
        color:#666;
    }
    .duanxin .dx_input{
        width: 50%
    }
    .duanxin .dx_input input{
        border:0px;
        padding-left: 30px;
        height: 100px;
        width: 100%;
        background: #f2f2f2;
        outline: none;
        font-size: 30px;

    }
    .duanxin .dx_btn{
        border:1px solid #3683D3;
        padding:10px 20px;
        border-radius: 10px;
        color:#3683D3;
        font-size: 30px
    }
    .next_btnk{
        position: fixed;
        left: 0;
        bottom: 0;
        padding:20px;
        box-sizing: border-box;
        width: 100%
    }
    .next_btnk .next_btn{
        width: 100%;
        background: #3683D3;
        color: #fff;
        text-align: center;
        padding: 30px;
        box-sizing: border-box;
        border-radius: 20px;
        font-size: 35px;
    }
    .tanchuang{
        width: 500px;
        text-align: center;
        background: rgba(0,0,0,0.6);
        color: #fff;
        border-radius: 20px;
        font-size: 35px;
        padding: 20px 0;
        margin: 0 auto;
        margin-top: 180px;
        display: none
    }

</style>
<body>
<div class="top">
    <div class="top_li">
        <div class="name active">浏览</div>
        <div class="red active"></div>
    </div>
<!--    <div class="xian active"></div>-->
<!--    <div class="top_li">-->
<!--        <div class="name active">短信验证</div>-->
<!--        <div class="red active"></div>-->
<!--    </div>-->
    <div class="xian "></div>
    <div class="top_li">
        <div class="name">在线支付</div>
        <div class="red"></div>
    </div>
</div>
<div class="cont">
    <div class="tip">手机号码默认为投保人，后续发送验证码以此为准,务必保证正确，谢谢！</div>
    <div class="duanxin">
        <div class="dx_tit">短信验证码</div>
        <div class="dx_input"><input type="text" id="yanzhengma" placeholder="请输入短信验证码"></div>
        <div class="dx_btn" id="btn" onclick="startCountdown()">发送验证码</div>
    </div>
</div>
<div class="tanchuang">
    发送验证码成功<br>
    请务必在此页面完成短信验<br>
    证码回填和验证
</div>
<div class="next_btnk">
    <div class="next_btn">下一步</div>
</div>

<!--{$res.learned_phone}-->

<!--/index/index/zhifu?id={$data.id}&type={$data.type}&time={$data.time}&channel_id={$data.channel_id}-->
</body>
<script type="application/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>
<script src="/assets/js/layui/layui.all.js"></script>
<script>
    var kk=true
    function startCountdown() {

        if(kk){

            var btn = document.getElementById("btn");
            var count = 60;
            // 设置按钮不可点击
            // btn.disabled = true;
            kk=false
            send()
            // 显示倒计时初始值
            btn.innerHTML = count + "秒后重新获取";

            // 每秒减少倒计时
            var timer = setInterval(function() {
                count--;
                btn.innerHTML = count + "秒后重新获取";

                if (count === 0) {
                    // 倒计时结束，恢复按钮状态
                    clearInterval(timer);
                    btn.disabled = false;
                    kk=true;
                    btn.innerHTML = "获取验证码";
                }
            }, 1000);
        }


    }
    // 发送验证码方法
    function send(){
        $(".tanchuang").show()
        setTimeout(function(){
            $(".tanchuang").hide()
        },2000)
        return false;
        var event = 'login';
        var mobile = $('#pd-form-mobile').val();
        $.ajax({
            url:'index/send',
            type:'POST',
            dataType: 'JSON',
            data:{
                mobile:mobile,
                event:event
            },
            success: function(result){
                if(result.code == 1){
                    layer.alert('发送验证码成功请务必在此页面完成短信验证码回填和验证', {icon:1}); // 显示2秒后自动关闭
                }else{
                    layer.alert(result.msg, {icon:2}); // 显示2秒后自动关闭
                }
            }
        })
    }

   $(".next_btn").click(function(){
       xiayibu()
   })
    function xiayibu(){
        var mobile = $('#yanzhengma').val();
        console.log('验证码',mobile)
        if(mobile == '123456'){
            window.location.href="/index/index/zhifu?id={$data.id}&type={$data.type}&time={$data.time}&channel_id={$data.channel_id}"
        }else{
            alert('验证码错误'); // 显示2秒后自动关闭
        }
        // $.ajax({
        //     type: "post",
        //     dataType: 'json',
        //     url: "/index/index/sms_post",
        //     data: {urls: data.data, id:1 },
        //     success: function (data) {
        //         window.location.href="/index/index/zhifu?id={$data.id}&type={$data.type}&time={$data.time}&channel_id={$data.channel_id}"
        //     }
        // })
    }
</script>
</html>